<template>
  <div>
    <CloudButton type="primary" @click="showModal()">
      Open Modal with async logic
    </CloudButton>
    <CloudModal
      title="Title"
      :visible="visible"
      :confirm-loading="confirmLoading"
      @ok="handleOk()"
      @cancel="handleCancel()"
    >
      <p>{{ ModalText }}</p>
    </CloudModal>
  </div>
</template>
<script>
export default {
  title: '2.异步关闭',
  data() {
    return {
      ModalText: 'Content of the modal',
      visible: false,
      confirmLoading: false,
    };
  },
  methods: {
    showModal() {
      this.visible = true;
    },
    handleOk(e) {
      this.ModalText = 'The modal will be closed after two seconds';
      this.confirmLoading = true;
      setTimeout(() => {
        this.visible = false;
        this.confirmLoading = false;
      }, 2000);
    },
    handleCancel(e) {
      console.log('Clicked cancel button');
      this.visible = false;
    },
  },
};
</script>